<template>
  <div class="repayment_detail_page">
    <div>
      <div class="title">
        <i class="icon"></i>
        还款计划
      </div>
    </div>
    <div class="list">
      <div class="item">
        <div class="item_c">
          <div class="key">借款日期</div>
          <div class="value">2024年1月12日</div>
          <i class="icon"></i>
        </div>
      </div>
      <div class="item">
        <div class="item_c">
          <div class="key">借款金额</div>
          <div class="value">￥12000.00</div>
          <i class="icon"></i>
        </div>
      </div>
      <div class="item">
        <div class="item_c">
          <div class="key">借款期限</div>
          <div class="value">12期</div>
          <i class="icon"></i>
        </div>
      </div>
      <div class="item">
        <div class="item_c">
          <div class="key">已还期数</div>
          <div class="value">1-5期已还清</div>
          <i class="icon"></i>
        </div>
      </div>
      <div class="item">
        <div class="item_c">
          <div class="key">剩余还款金额</div>
          <div class="value color_red">￥12000.00</div>
          <i class="icon"></i>
        </div>
      </div>
    </div>
    <div class="mod">
      <el-table :data="tableData">
        <el-table-column
          v-for="item in columns"
          :key="item.label"
          v-bind="item"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [],
      tableData: [],
    }
  },
  created() {
    this.columns = [
      {
        label: '还款日期',
        prop: '',
      },
      {
        label: '还款期数',
        prop: '',
      },
      {
        label: '还款金额',
        prop: '',
      },
      {
        label: '本金(元)',
        prop: '',
      },
      {
        label: '利息(元)',
        prop: '',
      },
      {
        label: '罚款(元)',
        prop: '',
      },
      {
        label: '状态',
        prop: '',
      },
    ]
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.repayment_detail_page {
  .title {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .icon {
      width: 3px;
      height: 16px;
      border-radius: 1px;
      background-color: $theme;
      margin-right: 5px;
    }
  }
  .list {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: -8px;
    margin-right: -8px;
    .item {
      flex: 1 1 20%;
      padding: 8px;
      .item_c {
        padding: 40px 30px;
        border-radius: 12px;
        box-shadow: 0 2px 6px 0 rgba(1, 24, 70, 0.10);
        background-color: #fff;
        position: relative;
        &:last-child {
          margin-right: 0;
        }
        .key {
          color: #999;
          font-size: 18px;
          margin-bottom: 24px;
        }
        .value {
          color: #333;
          font-size: 28px;
          font-weight: 500;
          &.color_red {
            color: #FF4D4F;
          }
        }
        .icon {
          display: block;
          width: 34px;
          height: 34px;
          background-color: red;
          position: absolute;
          top: 16px;
          right: 20px;
          z-index: 2;
        }
      }
    }
  }
  .mod {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    border-radius: 6px;
    margin-bottom: 16px;
    padding: 16px;
  }
}
</style>
